<template>
  <div>
    <!--组件在设计器中的样子-->
    <div v-if="mode === 'DESIGN'">
     <el-select :value="arrayValue" :placeholder="placeholder" clearable disabled
         :loading="loading" style="width:100%" @change="selectChange">
       <el-option v-for="(op, index) in dictOptions" :key="index" :value="op.value" :label="op.text"></el-option>
     </el-select>
    </div>
    <div v-else>
      <!--组件在流程实例预览中-->
      <template v-if="!readerMode">
        <el-select :value="arrayValue" :placeholder="placeholder" clearable
            :loading="loading" style="width:100%" @change="selectChange">
          <el-option v-for="(op, index) in dictOptions" :key="index" :value="op.value" :label="op.text"></el-option>
        </el-select>
      </template>
      <template v-else></template>
    </div>
  </div>
</template>

<script>
  //混入配置
  // import componentMinxins from '../ComponentMinxins'
  import {
    ajaxGetDictItems,
    getDictItemsFromCache
  } from '@/api/api'
  import {
    simpleDebounce
  } from '@/utils/util'
  import {
    getAction
  } from '@/api/manage'
  export default {
    name: "SingleSelectPicker",   //单选下拉选择
    components: {},
    props: {
      mode: {
        type: String,
        default: 'DESIGN'
      },
      required: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      value: String,
      options: Array,
      multiple: {
        type: Boolean,
        default: false
      },
      dicCode: {
        type: String,
        default: ''
      },
      readerMode: {
        type: Boolean,
        default: false
      },
      pageSize: { //默认查询20条
        type: Number,
        default: 20
      },
    },
    data() {
      return {
        loading: false,
        dictOptions: [], //数据源
        list: [],
        arrayValue:this.value,
        dictCode:this.dicCode,
      }
    },
   mounted() {  
     if(this.dicCode){
      this.initDictData()
     }
   },
    watch: {
      options: function(val) {
        this.setCurrentDictOptions(val);
      },
      // dicCode: {
      //   immediate: true,
      //   handler() {     
      //     if (this.value) {
      //       this.initDictData()
      //     }
      //   },
      // },
      value(val) {   
        if (!val) {
          this.arrayValue = null
          this.dictOptions = []
        } else {
          this.arrayValue = this.value
        }
       
      }
    },

    methods: {
      //初始数据
      initDictData() {    
        
        if (this.options && this.options.length > 0) {
          this.dictOptions = [...this.options]
        } else {
          //优先从缓存中读取字典配置
          let cacheOption = getDictItemsFromCache(this.dicCode)         
          if (cacheOption && cacheOption.length > 0) {
            this.dictOptions = cacheOption
            return
          }
          //根据字典Code, 初始化字典数组
          ajaxGetDictItems(this.dicCode, null).then((res) => {
            if (res.success) {   
              this.dictOptions = res.result ? res.result : []
            } else {
              this.$message.warning(res.message);
            }
          })
        }
      },
      setCurrentDictOptions(dictOptions) {
        this.dictOptions = dictOptions
      },
      //选中值
      selectChange(selectedValue) {
         if(selectedValue){
           this.$emit('change',selectedValue)
           const selectedItem = this.dictOptions.find((s)=>s.value === selectedValue)
           this.$emit('changeOk',selectedItem)
         }else{
           this.arrayValue = null
           this.dictOptions = []
           this.$emit('change', null);
           this.$emit('changeOk',{value:null,text:null})
         }
      },
      //获取数据
      // loadData(keyword) {
      //   if (keyword) {
      //     this.dictOptions = []
      //     this.loading = true
      //     // 字典code格式：table,text,code
      //     getAction(`/sys/dict/getDictItems/${this.dictCode}`).then(res => {
      //       if (res.success) {
      //         this.dictOptions = res.result
      //       } else {
      //         this.$message.warning(res.message)
      //       }
      //     }).finally(() => {
      //       this.loading = false
      //     })
      //   }
      // }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
<style scoped>
 /deep/.el-input__inner{
    height: 40px !important;
 }
</style>